<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>06_数据劫持-数据绑定</title>
    <!--
    1. 数据绑定
      * 初始化显示: 页面(表达式/指令)能从data读取数据显示 (编译/解析)
      * 更新显示: 更新data中的属性数据==>页面更新
  --></head>
  <body>
    <div id="app">
      <p>{{num}}</p>
      <p>{{num}}</p>
      <p>{{person.name}}</p>
      <button v-on:click="handleClick">按钮</button>
    </div>
    <script src="./js/observer.js"></script>
    <script src="./js/watcher.js"></script>
    <script src="./js/compile.js"></script>
    <script src="./js/mvvm.js"></script>
    <script>
      /*
        dep和watcher之间的联系：
          什么有dep？ 所有data数据有自己dep
          什么有watcher？ 除了事件指令以外其他所有模板语法都有自己的watcher

          dep会保存n个相关的watcher
          watcher会n个保存相关的dep

        响应式：更新数据，数据变，用户界面也变
          当解析除了事件指令以外插值语法或指令语法时，都会new Watcher
          watcher中会接受到用来更新用户界面的updater方法保存在cb中
          同时，会读取表达式的值，读取值的时候会触发数据劫持阶段给数据绑定的get方法
          在get方法中会调用dep.depend()建立dep和watcher之间的联系
            dep中会保存watcher
            watcher会保存dep
          将来，当用户更新data数据时，首先触发数据代理的set方法，里面更新时原data数据
          然后触发数据劫持的set方法，这个方法中就会更新数据，同时调用dep.notify方法来
          通知当前dep保存的所有watcher去更新界面（因为每个watcher中都保存了cb）
          所以，达到数据更新了，用户界面也更新了，响应式  
      */
      debugger;
      new MVVM({
        // el: "#app",
        el: document.getElementById("app"),
        data: {
          num: 0,
          person: {
            name: 'jack'
          }
        },
        methods: {
          handleClick() {
            this.num++;
          },
        },
      });
    </script>
  </body>
</html>
